<div class="col-lg-12">
	<div class="row">
		<div class="col-lg-12">
			<ol class="breadcrumb">
				<li><a href="#/home"><i class="fa fa-home mrg-r-sm"></i>首页</a></li>
			</ol>
		</div>
	</div>
	
	<div class="row">
		<div class="col-lg-3 col-sm-6 col-xs-12">
			<div class="main-box infographic-box">
				<i class="fa fa-user red-bg"></i>
				<span class="headline">老人会员数</span>
				<span class="value">
					<span>{{laolist}}</span>
				</span>
			</div>
		</div>
		<div class="col-lg-3 col-sm-6 col-xs-12">
			<div class="main-box infographic-box">
				<i class="fa fa-shopping-cart emerald-bg"></i>
				<span class="headline">订单数量</span>
				<span class="value" >
					<span>{{orderCount}}</span>
				</span>
			</div>
		</div>
		<div class="col-lg-3 col-sm-6 col-xs-12">
			<div class="main-box infographic-box">
				<i class="fa fa-money green-bg"></i>
				<span class="headline">累计收入</span>
				<span class="value">
					¥<span>{{totalCount}}</span>
				</span>
			</div>
		</div>
		<div class="col-lg-3 col-sm-6 col-xs-12">
			<div class="main-box infographic-box">
				<i class="fa fa-eye yellow-bg"></i>
				<span class="headline">满意度</span>
				<span class="value" >
					<span >{{manyiRate}}</span>
				</span>
			</div>
		</div>
	</div>
	<div class="row">


			<div class="main-box clearfix">
				<div class="tabs-wrapper tabs-no-header">
					<ul class="nav nav-tabs">
						<li class="active"><a  href="javascript:void(0);#tab-weeks"      data-toggle="tab">本周</a></li>
						<li class=""><a  href="javascript:void(0);#tab-months"      data-toggle="tab">本月</a></li>
						<li class=""><a href="javascript:void(0);#tab-year"    data-toggle="tab">本年</a></li>
					</ul>
					<div class="tab-content tab-content-body clearfix" style="height: 300px; ">
						<div class="tab-pane fade active in" id="tab-weeks"   >
							<div id="graph-bar-weeks" style="height: 300px; padding: 0px; position: relative;">
							</div>
						</div>
						<div class="fade" id="tab-months"    >
							<div id="graph-bar-months" style="height: 300px; padding: 0px; position: relative;">
							</div>
						</div>
						<div class="  fade" id="tab-year"    >
							<div id="graph-bar-year" style="height: 300px; padding: 0px;margin-top: -300px;  position: relative;">
							</div>
						</div>
					</div>
				</div>
			</div>

	</div>
	<div class="row">
		<div class="col-lg-12">
			<div class="main-box">
				<header class="main-box-header clearfix">
					<h2>养老服务统计</h2>
				</header>
				<div class="main-box-body clearfix">
					<div id="graph-flot-donut" style="height: 400px; padding: 0px; position: relative; ">

					</div>
				</div>
			</div>
		</div>
		
	</div>
	
	<div class="row">
		<div class="col-lg-12">
			<div class="main-box">
				<header class="main-box-header clearfix">
					<h2>订单数量统计</h2>
				</header>
				<div class="main-box-body clearfix">
					<div id="graph-flot-points" style="height: 400px; padding: 0px; position: relative;"></div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="col-lg-12">
		<div class="main-box no-header clearfix">
			<header class="main-box-header clearfix">
					<div class="filter-block pull-left">
						<div class="form-group pull-left">
							最新订单列表
						</div>
					</div>
					<div class="filter-block pull-right">
						<a class="btn btn-success pull-left" href="#/order">
							<i class="fa fa-search search-icon"></i> 查看全部
						</a>
					</div>
				</header>
			<div class="main-box-body clearfix" >
				<div class="table-responsive">
					<table class="table table-hover table-striped text-center">
						<thead >
							<tr>
								<th class="text-center"><span>订单号</span></th>
								<th class="text-center"><span>用户名</span></th>
								<th class="text-center"><span>下单时间</span></th>
								<th class="text-center"><span>服务类型</span></th>
							</tr>
						</thead>

						<tbody>
							<tr role="row" class="odd" ng-repeat="item in list" id="{{item.order_id}}">
								<td class="sorting_1">{{item.order_id}}</td>
								<td class="sorting_1">{{item.name}}</td>
								<td>{{item.create_time}}</td>
								<td>{{item.serviceType1}}&nbsp;{{item.serviceType3_title}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
</div>
<script>
  function  fun(dataDonut){
	//养老服务统计
	if ($('#graph-flot-donut').length) {
//		console.log(dataDonut);
			$.plot('#graph-flot-donut', dataDonut, {
			    series: {
			        pie: {
			            show: true,
			            innerRadius: 0.5,
			            label: {
			                show: true,
			            }
			        }
			    },
				colors: ['#e74c3c', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6', '#95a5a6'],
			    legend: {
			        show: false,
			    }
			});
		}
}

		//订单数量分析
		function order(likes){
			if ($('#graph-flot-points').length) {
				//var likes = [[17, 85],[18, 90],[19, 85],[20, 80],[21, 75],[22, 80],[23, 75],[24, 70],[25, 65],[26, 75],[27,80],[28, 85],[29, 90], [30, 95]];
				//console.log(likes);
				var plot = $.plot($("#graph-flot-points"),
					   [ { data: likes, label: "当月订单数量统计"} ], {
						   series: {
							   lines: { 
								   show: true,
									lineWidth: 2,
									fill: true, 
									fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.3 } ] }
							 	},
							   points: { show: true, 
										 lineWidth: 2 
									 },
							   shadowSize: 0
						   },
						   grid: { hoverable: true, 
								   clickable: true, 
								   tickColor: "#f9f9f9",
								   borderWidth: 0
								 },
						   colors: ["#e74c3c"],
							xaxis: {ticks:10, tickDecimals: 0},
							yaxis: {ticks:5, tickDecimals: 0},
						 });
	
				function showTooltip(x, y, contents) {
					$('<div id="tooltip">' + contents + '</div>').css( {
						position: 'absolute',
						display: 'none',
						top: y + 5,
						left: x + 5,
						border: '1px solid #fdd',
						padding: '2px',
						'background-color': '#dfeffc',
						opacity: 0.80
					}).appendTo("body").fadeIn(200);
				}
	
				var previousPoint = null;
				$("#graph-flot-points").bind("plothover", function (event, pos, item) {
					$("#x").text(pos.x.toFixed(2));
					$("#y").text(pos.y.toFixed(2));
	
						if (item) {
							if (previousPoint != item.dataIndex) {
								previousPoint = item.dataIndex;
	
								$("#tooltip").remove();
								var x = item.datapoint[0].toFixed(0),
									y = item.datapoint[1].toFixed(0);
	
								showTooltip(item.pageX, item.pageY,
											"当天订单数量" + " ： " + y);
							}
						}
						else {
							$("#tooltip").remove();
							previousPoint = null;
						}
				});
			}
	}



</script>
<script>
	/*$(function() {

		//  周
		if ($('#graph-bar-weeks').length) {
			var db1 = [];
			for (var i = 0; i <= 10; i += 1) {
				db1.push([i, parseInt(Math.random() * 30)]);
			}
			var series = new Array();
			series.push({
				data : db1,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 1,
					lineWidth: 1,
					fill: 1
				}
			});
			$.plot("#graph-bar-weeks", series, {
				colors: [  '#2ecc71'],
				grid: {
					tickColor: "#ddd",
					borderWidth: 0
				},
				shadowSize: 0
			});
		}

		//  月
		if ($('#graph-bar-months').length) {
			var db1 = [];
			for (var i = 0; i <= 10; i += 1) {
				db1.push([i, parseInt(Math.random() * 30)]);
			}
			var series = new Array();
			series.push({
				data : db1,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 1,
					lineWidth: 1,
					fill: 1
				}
			});
			$.plot("#graph-bar-months", series, {
				colors: [  '#3498db'],
				grid: {
					tickColor: "#ddd",
					borderWidth: 0
				},
				shadowSize: 0
			});
		}
		if ($('#graph-bar-year').length) {
			var db1 = [];
			for (var i = 0; i <= 10; i += 1) {
				db1.push([i, parseInt(Math.random() * 30)]);
			}
			var series = new Array();
			series.push({
				data : db1,
				bars : {
					show : true,
					barWidth : 0.2,
					order : 1,
					lineWidth: 1,
					fill: 1
				}
			});
			$.plot("#graph-bar-year", series, {
				colors: [  '#95a5a6'],
				grid: {
					tickColor: "#ddd",
					borderWidth: 0
				},
				shadowSize: 0
			});
		}

	});*/
	function servantGraph(db,sign){
		//  周
		if ($('#'+sign).length) {
			var db1 = [];
			for(var key in db){
				db1.push([key, db[key]]);
			}
			var series = new Array();
			series.push({
				data : db1,
				stack: 0,
				lines: {
					show: false,
					fill: true,
					steps: false,
					lineWidth: 1,
					fill: 1
				},
				bars : {
					show : true,
					barWidth : 0.25,
					lineWidth: 1,
					fill: 1
				}
			});
			var colors=[];
			if(sign=="graph-bar-weeks"){
				colors.push("#2ecc71");
			}else if(sign=="graph-bar-months"){
				colors.push("#3498db");
			}else{
				colors.push("#95a5a6");
			}
			$.plot('#'+sign, series, {
				colors: colors,
				grid: {
					tickColor: "#ddd",
					borderWidth: 1
				},
				shadowSize: 0
			});





		}
	}

</script>